<template>
    <div>
        <el-container>
            <el-header class="layout-header">
                <img src="../../public/images/shark.png" style="width: 60px;height: 60px;position: absolute;top: 0px">
                <h1 style="color: aliceblue;margin-left: 5%">酷鲨商城运营管理平台</h1>
            </el-header>
            <el-container class="layout-body">
                <el-aside class="layout-aside">
                    <el-menu
                            background-color="#545c64"
                            router
                            :default-active="this.$router.currentRoute.path"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            class="el-menu-vertical-demo">
                        <el-menu-item index="/sys-admin/index">
                            <i class="el-icon-s-home"></i>首页
                        </el-menu-item>
                        <el-submenu index="0">
                            <template slot="title">
                                <i class="el-icon-s-goods"></i>
                                <span>临时页面</span>
                            </template>
                            <el-menu-item index="/sys-admin/temp/brand/add-new">
                                <i class="el-icon-circle-plus"></i>添加品牌
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/temp/category/add-new">
                                <i class="el-icon-circle-plus"></i>添加类别
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/temp/album/add-new">
                                <i class="el-icon-circle-plus"></i>添加相册
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/temp/admin/add-new">
                                <i class="el-icon-circle-plus"></i>添加用户
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-s-goods"></i>
                                <span>商品管理</span>
                            </template>
                            <el-menu-item index="/sys-admin/product/spu-management">
                                <i class="el-icon-s-grid"></i>SPU台账
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/product/spu-add-new">
                                <i class="el-icon-circle-plus"></i>新增SPU
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/product/album-management">
                                <i class="el-icon-picture"></i>相册管理
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/product/category-management">
                                <i class="el-icon-s-unfold"></i>商品类别
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/product/attributeTemplate-management">
                                <i class="el-icon-s-flag"></i>属性模板
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/product/brand-management">
                                <i class="el-icon-s-data"></i>品牌管理
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-s-order"></i>
                                <span>订单管理</span>
                            </template>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-s-ticket"></i>
                                <span>营销管理</span>
                            </template>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-s-shop"></i>
                                <span>商家管理</span>
                            </template>
                        </el-submenu>
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-s-tools"></i>
                                <span>权限管理</span>
                            </template>
                            <el-menu-item index="/sys-admin/admin/user-list">
                                <i class="el-icon-s-custom"></i>用户列表
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/admin/role-list">
                                <i class="el-icon-s-grid"></i>角色列表
                            </el-menu-item>
                            <el-menu-item index="/sys-admin/admin/permission-list">
                                <i class="el-icon-circle-plus"></i>权限列表
                            </el-menu-item>
                        </el-submenu>

                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>

<script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'

    export default {
        name: 'HomeView',
        components: {
            HelloWorld
        },
    }
</script>
<style>
    .layout-header {
        background-color: #545c64;
        line-height: 60px;

    }

    .layout-body {
        position: absolute;
        top: 60px;
        bottom: 0;
        right: 0;
        left: 0;
    }

    .layout-aside {
        background-color: #545c64;
    }
    .el-menu-item.is-active{
        background:#3d3c3c !important;
    }
</style>